<template>
  <div class="wbody">
    <div>
      <el-tag type="success" class="mc" style="font-size: 20px;margin-bottom: 25px">
        新疆青松建材化工(集团)股份有限公司水泥分公司过磅单
      </el-tag>
    </div>
    <div class="form-container">

      <el-row class="bk">
        <div class="item1">
          <el-form-item label="单据编号：" prop="djBh">
            <el-col :span="18">
              <input type="text" v-model="djBh" required>
            </el-col>
          </el-form-item>
        </div>
        <div class="item">
          <el-form-item label="订单编号：" prop="ddBh">
            <el-col :span="18">
              <input type="text" v-model="ddBh" required>
            </el-col>
          </el-form-item>
        </div>
        <div class="item">
          <el-form-item label="制单日期：" prop="birthday">
            <el-col :span="66">
              <el-date-picker type="datetime"
                              format="YYYY-MM-DD HH:mm:ss"
                              value-format="YYYY-MM-DD HH:mm:ss"
                              placeholder="选择日期"
                              v-model="zdDate"
                              style="width: 200px;">

              </el-date-picker>
            </el-col>
          </el-form-item>
        </div>
      </el-row>
    </div>
    <div class="wbk">
      <table>
        <tr class="tr1">

          <td>
            <div class="col1 ">提货单位</div>


          </td>
          <td>
            <div class="col2 th">
              <input type="text" v-model="companyName" required/>
            </div>
          </td>
          <td>
            <div class="col1">送货地址</div>
          </td>
          <td>
            <div class="col4">
              <input type="text" v-model="deliveryAddress"/>
            </div>
          </td>

        </tr>
        <tr>
          <td>
            <div class="col1">
              供货单位
            </div>
          </td>
          <td>
            <div class="col2" style="font-size: 15px;line-height: 30px">新疆青松建材化工(集团)股份有限公司水泥分公司( 新
              线 )
            </div>
          </td>
          <td>
            <div class="col1">
              承运单位
            </div>
          </td>

          <td>
            <div class="col4">
              <input type="text" v-model="carriageCompanyName"/>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="col1">
              销售单位
            </div>
          </td>
          <td>
            <div class="col2">新疆青松建材化工(集团)股份有限公司水泥分公司</div>
          </td>
          <td>
            <div class="col1">
              水泥编号
            </div>
          </td>
          <td>
            <div class="col1 col4">
              <input type="text" v-model="snBh" required/>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="col1 ">
              品种规格
            </div>
          </td>

          <td>
            <div class="col2">
              <div class="pzGg"><input type="text" v-model="pzGg" required/></div>
              <span class="ywy1">
            业务员
          </span>
            </div>
          </td>
          <td>
            <div class="col1  col3">
              <input type="text" v-model="ywy" required/>
            </div>
          </td>
          <td>
            <div class="col6">
              <div class="col5">
                车号
              </div>
              <input class="ch" type="text" v-model="wagonNumber" required/>
            </div>

          </td>

        </tr>
        <tr>
          <td>
            <div class="col1">
              计划量
            </div>
          </td>
          <td>
            <div class="col2 jh"><span class="mz">毛重</span><span>皮重</span><span>净重</span></div>
          </td>
          <td>
            <div class="col1 col3">袋数</div>
          </td>

          <td>
            <div class="col4">

              <div class="col5">提货方式</div>
              <div style="text-align: center;line-height: 38px">汽运自提</div>
            </div>
          </td>

        </tr>
        <tr>
          <td>
            <div class="col1 jhl">
              <input class="col1__inp" type="text" v-model="jhl" required/>
            </div>
          </td>
          <td>
            <div class="col2 jh_t">
              <input class="one" type="text" v-model="roughWeight" required/>
              <input type="text" v-model="tare" required/>
              <input type="text" v-model="suttle" required/>
            </div>
            <!--        <div class="mzt"></div></td>-->
            <!--      <td><div class="mzt"></div></td>-->
            <!--      <td><div class="jz2"></div></td>-->
          </td>
          <td>
            <div class="col1 col3">
              <input type="text" v-model="pocketNumber"/>
            </div>
          </td>
          <td>
            <div>
              <div class="col5 ">皮重时间</div>
              <div class="col6 hour">
                <el-date-picker type="datetime"
                                format="YYYY-MM-DD HH:mm:ss"
                                value-format="YYYY-MM-DD HH:mm:ss"
                                placeholder="选择日期"
                                v-model="tareDate"
                                style="width: 229px;">

                </el-date-picker>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="col1">
              备注
            </div>
          </td>
          <td>
            <div class="bz"><input type="text" v-model="remarks"/></div>
          </td>
          <td>
            <div class="col1"></div>
          </td>
          <td>
            <div>
              <div class="col5">毛重时间</div>
              <div class="col6 hour">
                <el-date-picker type="datetime"
                                format="YYYY-MM-DD HH:mm:ss"
                                value-format="YYYY-MM-DD HH:mm:ss"
                                placeholder="选择日期"
                                v-model="roughWeightDate"
                                style="width: 229px;">

                </el-date-picker>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="col1">制单：</div>
          </td>
          <td>
            <div class="col1 col4"><input :disabled="true" type="text" v-model="companyName" required/></div>
          </td>
          <td>
            <div>司机：</div>
          </td>
          <td>
            <div class="col1 col4">
              <input type="text" v-model="userName" required/>
            </div>
          </td>

        </tr>
      </table>
    </div>
    <el-button type="success" @click='downloadPDF' style=" float: right; margin-top: 20px ">下载pdf</el-button>
  </div>

</template>

<script>
import {downloadFile} from '@/store'

export default {
  components: {},
  data() {
    return {
      formInline: {
        user: "",
        region: "",
      },
      zdDate: "",
      djBh: "",
      ddBh: "",
      companyName: "",
      snBh: "",
      pzGg: "",
      ywy: "",
      wagonNumber: "",
      jhl: "",
      roughWeight: "",
      tare: "",
      suttle: "",
      tareDate: "",
      roughWeightDate: "",
      whichLeague: "",
      deliveryAddress: "",
      carriageCompanyName: "",
      pocketNumber: "",
      remarks: "",
      userName: "",
      aaa: ""

    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    downloadPDF() {
      // 本地
      let url = 'http://localhost:15628/shadow/pdf/createQualificationPdf'
      // 阿里云服务器
      // let url = 'http://47.108.146.26:15628/shadow/pdf/createQualificationPdf'
      // 也可能你不需要这个参数
      let params = {
        zdDate: this.zdDate,
        djBh: this.djBh,
        ddBh: this.ddBh,
        companyName: this.companyName,
        snBh: this.snBh,
        pzGg: this.pzGg,
        ywy: this.ywy,
        wagonNumber: this.wagonNumber,
        jhl: this.jhl,
        roughWeight: this.roughWeight,
        tare: this.tare,
        suttle: this.suttle,
        tareDate: this.tareDate,
        roughWeightDate: this.roughWeightDate
      }
      let method = 'post'
      // 调用引入的封装好的方法
      downloadFile(url, method, params)
    }

  },
};

</script>

<style scoped>
.wbody {
  margin: auto;
  width: 900px;
  height: 380px;
  text-align: center;
}

table {
  width: 100%;
  margin: 0 auto;
  border: 1px black solid;
  /* border-spacing：指定边框之间的距离；边框之间虽然没有距离了，但是实际上是两条边框的和，看起来是变粗了 */
  /* border-spacing: 0; */
  /*border-collapse:collapse；设置边框的合并；真正的将两条边框合并成一条边框 */
  border-collapse: collapse;
  /* 默认情况下元素在td中是垂直居中的，可以通过vectical-align来修改 */
  vertical-align: middle;
  text-align: center;
}

.th input {
  border: 0;
  outline: 0;
  width: 100%;
  line-height: 29px;
  font-size: 14px;

}

/* 如果表格中没有使用tbody而是直接使用tr，那么浏览器会自动创建一个tbody，并且将tr全都放到tbody中
   所以说，tr不是table的子元素 */
tbody tr:nth-child(odd) {
  background-color: rgb(211, 216, 188);
}

.item {
  margin-left: 33px;
}

.item input,
.item1 input {
  height: 25px;
}

.pzGg {
  float: left;
  width: 260px;
  height: 30px;

}

.pzGg input {
  width: 100%;
  line-height: 30px;
  border: 0;
  outline: 0;
  background: 0;

}

.ywy1 {
  width: 129px;
  line-height: 30px;
  display: inline-block;

  border-left: 1px solid black;
}

.jh span {
  display: inline-block;
  width: 129px;
  line-height: 30px;
  border-left: 1px solid black;
}

.jh .mz {
  border-left: 0;
}

.jh_t input {
  float: left;
  width: 125px;
  line-height: 29px;
  border: none;
  outline: 0;
  border-left: 1px solid black;
  background: 0;

}

.jh_t .one {
  border-left: 0;
}

.bz input {
  width: 100%;
  line-height: 30px;
  border: 0;
  outline: 0;
}

td {

  border: 1px black solid;
}


.form-container {
  margin: auto;
  width: 100%;
  height: 50px;
  text-align: center;
  display: flex;
  flex-wrap: nowrap; /* 防止换行 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  white-space: nowrap; /* 防止换行 */
  min-width: 100%; /* 或者其他值 */
}

.col1 {
  width: 100px;
  height: 30px;
  text-align: center;
}

.col2 {
  width: 390px;
  height: 30px;
}

.col4 {
  width: 340px;
  height: 30px;
}

.col5 {
  float: left;
  width: 110px;
  line-height: 30px;
  border-right: 1px solid black;

}

.col3 input {
  width: 80px;
  line-height: 30px;
  outline: 0;
  border: 0;
}

.jhl input {
  width: 100%;
  line-height: 30px;
  background: 0;
  border: 0;
  outline: 0;
}

.col4 input {
  width: 330px;
  line-height: 28px;
  border: 0;
  outline: 0;
}

.ch {
  float: left;
  width: 220px;
  outline: 0;
  border: 0;
  line-height: 30px;
}

</style>
